<template>
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="item in list" :key="item.id">
      <img class="img" :src="item.pic" :alt="item.title" @click="clickImg(item.art_id)"/>
    </van-swipe-item>
  </van-swipe>
</template> 
<script>
import { Swipe, SwipeItem } from "vant";
export default {
  name: "Swipe",
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      list:[]
    }
  },
  created () {
    const _this = this;
    const swipeList = _this.$store.getters.getSwipeList;
    if(swipeList.length > 0){
      _this.list = swipeList;
    }else{
      _this.getSlidepicPage();
    }
  },
  methods: {
    clickImg(id) {
      this.$router.push('/case/article/'+ id);
    },
    getSlidepicPage() {
      let params = {
        is_show: 1,
        pageNo: 1,
        pageSize: 10
      }
      this.$request.getSlidepicPage(params).then(res=>{
        console.log("res", res)
        this.list = res.data.data
        this.$store.commit('setSwipeList', this.list);
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.img{
  width: 100%;
  object-fit: cover;
}
</style>
